<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" style="margin-bottom:20px">
      <div>
        <el-select size="mini" v-model="status" placeholder="请选择" @change="statusChange">
          <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span style="margin-left:20px;font-size:12px">优惠券类型</span>
        <el-select clearable size="mini" v-model="couponWay" placeholder="请选择"  @change="couponWayChange">
          <el-option
            v-for="item in couponWayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span style="margin-left:20px;font-size:12px">日期</span>
        <el-date-picker
          size="mini"
          v-model="dateValue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          value-format="timestamp"
          >
        </el-date-picker>
      </div>
      <div>
        <el-button size="mini" type="primary" @click="handleExprot">导出数据</el-button>
        <el-button size="mini" type="warning" @click="handleALLConfirm">一键核销</el-button>
      </div>
    </el-row>

    <el-table
      ref="courseTable"
      :data="couponData"
      :border="true"
      :height="690"
      :header-cell-style="{background:global.mainColor}"
      style="width: 100%"
    >
      <el-table-column prop="name" label="优惠券名称" align="center" />
      <el-table-column label="优惠券类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.type | couponWayClase}}
        </template>
      </el-table-column>
      <el-table-column label="生效日期" align="center">
        <template slot-scope="scope">
           {{ scope.row.beginUseTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column label="失效日期" align="center">
        <template slot-scope="scope">
          {{ scope.row.expireTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号码" align="center" />
      <el-table-column label="使用日期" align="center">
        <template slot-scope="scope">
           {{ scope.row.useTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status | couponStatus}}
        </template>
      </el-table-column>
      <el-table-column v-if="status===1" label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.type===2" size="mini" type="warning"  @click="handleConfirm(scope.row)">核销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top:10px" type="flex" justify="center">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { urlEncode } from '@/utils'
import { couponReceiveList, couponExport, updateBatchByIds } from '@/api/coupon'

export default {
  name: 'CouponReceive',
  data() {
    return {
      status: 1,
      dateValue: [],
      couponWay: null,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      couponData: [],
      selectOptions: [
        {
          label: '领取名单',
          value: 1
        },
        {
          label: '已使用',
          value: 2
        }
      ],
      couponWayOptions: [
        {
          label: '立减券',
          value: 0
        },
        {
          label: '满减券',
          value: 1
        },
        {
          label: '礼品券',
          value: 2
        }
      ]
    }
  },
  filters: {
    couponStatus(type) {
      switch (type) {
        case 1:
          return '领取未使用'
        case 2:
          return '已使用'
        case 3:
          return '已过期'
      }
    }
  },
  watch: {
    dateValue(date) {
      this.getList()
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  created() {
    this.getList()
  },
  methods: {
    handleExprot() {
      TDAPP.onEvent('导出数据');
      const data = {
        'status': this.status,
        'businessId': this.$store.getters.businessId,
        'couponStartTime': this.dateValue[0],
        'couponEndTime': this.dateValue[1]
      }
      // couponExport(data).then(res => {

      // })
      window.location.href =
        process.env.VUE_APP_BASE_API +
        '/jbl-marketing/api/merchant/v1/couponReceive/export?' +
        urlEncode(data).slice(1)
    },
    handleALLConfirm() {
      const data = this.couponData.map(i => {
        return {
          id: i.id,
          status: this.status
        }
      })
      updateBatchByIds(data).then(res => {
        this.$message({
          message: '核销成功',
          type: 'success'
        })
        this.getList()
      })
    },
    handleConfirm(row) {
      updateBatchByIds(
        [
          {
            'id': row.id,
            'status': this.status
          }
        ]
      ).then(res => {
        this.$message({
          message: '核销成功',
          type: 'success'
        })
        this.getList()
      })
    },
    statusChange() {
      if(this.status===1){
        TDAPP.onEvent('优惠券筛选条件（领取名单）')
      }else{
        TDAPP.onEvent('优惠券筛选条件（已使用）')
      }
      this.getList()
    },
    couponWayChange() {
      this.getList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
      this.$nextTick(() => {
        this.$refs.courseTable.bodyWrapper.scrollTop = 0
      })
    },
    getList() {
      couponReceiveList({
        businessId: this.$store.getters.businessId,
        status: this.status,
        startTime: this.dateValue && this.dateValue[0],
        endTime: this.dateValue && this.dateValue[1],
        couponWay: this.couponWay,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.couponData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

